<template>
	<div>
		<!-- 头部 -->
		<div class="flex header">
			<div class="head flex">
				<a href="#" class="logo">
					<img src="./img/logo.png" alt="" />
				</a>
				<ul class="head_nav flex">
					<li class="nav_link cur">
						<a href="#">首页</a>
					</li>
					<li class="nav_link">
						<a href="#">产品中心</a>
					</li>
					<li class="nav_link showlist">
						<a href="#">区块链</a>
						<div class="list">
							<a href="#">网心云</a>
							<a href="#" class="bor">迅雷链</a>
							<a href="#" class="bor">星域云</a>
						</div>
					</li>
					<li class="nav_link">
						<a href="#">开放能力</a>
					</li>
					<li class="nav_link showlist">
						<a href="#">关于我们</a>
						<div class="list">
							<a href="#">公司简介</a>
							<a href="#" class="bor">企业价值观</a>
							<a href="#" class="bor">新闻中心</a>
							<a href="#" class="bor">管理团队</a>
							<a href="#" class="bor">公司荣誉</a>
							<a href="#" class="bor">联系我们</a>
						</div>
					</li>
					<li class="nav_link">
						<a href="#">投资者关系</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 内容 -->
		<div class="main">
			<!-- 焦点图 -->
			<div class="banner">
				<div class="banner_wr">
					<div class="banner_pro">
						<div class="banner_img">
							<div class="banner_cont">
								<!-- logo -->
								<a class="logo"> <i></i> </a>
								<!-- 标题 -->
								<h3 class="title">
									<a href="#">迅雷11</a>
								</h3>
								<!-- 介绍 -->
								<p class="banner_text">更快！但不止于快！</p>
								<!-- 下载 -->
								<a href="#" class="banner_xiazai">
									<i class="box"></i>
									<i class="mask"></i>
									<i class="info j_button_text">立即下载</i>
								</a>
							</div>
							<i class="banner_line1"></i>
							<i class="banner_line2"></i>
							<div class="changge">
								<a class="icon1"></a>
								<a class="icon2"></a>
								<a class="icon3"></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 内容板块 -->
			<!-- 中间 -->
		<main>
			<!-- 产品 -->
			<div class="product">
				<div class="product_top flex">
					<div
						class="product_item"
						v-for="(val, index) in product"
						:key="index"
					>
						<img :src="val.bg" class="bg" />
						<div class="con">
							<img :src="val.img" class="img" />
							<p>{{ val.name }}</p>
							<div>{{ val.text }}</div>
						</div>
					</div>
				</div>
				<div class="more">更多产品</div>
			</div>
			<!-- 共享计算 -->
			<div class="computed">
				<h3>共享计算与区块链</h3>
				<p>
					迅雷是全球共享计算与区块链创领者，是中国拥有核心技术的分布式计算创新企业
				</p>
				<div class="computed_con">
					<div class="computed_con_con flex">
						<div class="item" v-for="(v, index) in comp" :key="index">
							<div class="item_con">
								<h4>{{ v.h4 }}</h4>
								<p>{{ v.p }}</p>
								<i></i>
								<div>{{ v.div }}</div>
								<span>访问网站</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 招聘 -->
			<div class="job">
				<h3>迅雷招聘</h3>
				<div>
					<img src="./img/xunlei (5).jpg" />
				</div>
			</div>
		</main>
		</div>

		<!-- 回顶部 -->
		<a class="feedback">意见<br />反馈</a>
		<a class="to_top" href="javascript:;" role="button">
			返回顶部 <i class="common-back_ico"></i>
		</a>

		<!-- 底部 -->
		<div class="flex footer">
			<div class="footer_content">
				<!-- 底部第一层 -->
				<div class="top flex">
					<ul class="nav flex">
						<!-- 第一层导航栏 -->
						<li><a href="#">产品中心</a></li>
						<li><a href="#">关于迅雷</a></li>
						<li><a href="#">迅雷招聘</a></li>
						<li><a href="#">联系我们</a></li>
						<li><a href="#">迅雷论坛</a></li>
						<li><a href="#">客服中心</a></li>
					</ul>
					<div class="tubiao flex">
						<a href="#">
							<i class="wb"></i>
						</a>
						<a href="#" class="right">
							<i class="wx"></i>
							<div class="erweima">
								<img src="./img/wx_erm.png" />
							</div>
						</a>
					</div>
				</div>
				<!-- 中间 -->
				<div class="middle">
					<p>
						<a target="_blank" href="#">增值电信业务粤B2-20050219号</a>
						|
						<a target="_blank" href="#">粤网文[2017]0901-125号</a>
						|
						<a target="_blank" href="#">广电节目经营(粤)字第786号-20050219号</a>
						|
						<a target="_blank" href="#">互联网出版(粤)字053号</a>
					</p>
					<p>Copyright © 2003-2021 XUNLEI.COM All Rights Reserved</p>
				</div>
				<!-- 底部 -->
				<div class="bottom">
					<ul class="flex">
						<li class="background_img">
							<a target="_blank" href="#">
								<i class="ico ico01"></i>
								工商网监
								<br />
								电子标识
							</a>
						</li>
						<li>
							<a target="_blank" href="#">
								<i class="ico ico02"></i>
								经营性网站
								<br />
								备案信息
							</a>
						</li>
						<li>
							<a target="_blank" href="#">
								<i class="ico ico03"></i>
								不良信息
								<br />
								举报中心
							</a>
						</li>
						<li>
							<a target="_blank" href="#">
								<i class="ico ico04"></i>
								网上有害信息
								<br />
								举报专区
							</a>
						</li>
						<li>
							<a target="_blank" href="#">
								<i class="ico ico05"></i>
								粤公网安备
								<br />
								44030502001761号
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 回顶部
window.onload = function () {
	var obtn = document.getElementsByClassName('to_top')[0]
	var clientHeight = document.documentElement.clientHeight //获取可视区域的高度
	var timer //定义一个定时器
	window.onscroll = function () {
		var osTop = document.documentElement.scrollTop || document.body.scrollTop
		if (osTop >= clientHeight) {
			obtn.style.display = 'block'
		} else {
			obtn.style.display = 'none'
		}
	}
	var obtns = obtn.children[0]
	obtns.onclick = function () {
		clearInterval(timer)
		timer = setInterval(function () {
			var osTop = document.documentElement.scrollTop || document.body.scrollTop
			window.scrollTo({
				top: 0,
				behavior: 'smooth',
			})
			if (osTop == 0) {
				clearInterval(timer)
			}
		}, 500)
	}
	obtn.onclick = function () {
		clearInterval(timer)
		timer = setInterval(function () {
			var osTop = document.documentElement.scrollTop || document.body.scrollTop
			window.scrollTo({
				top: 0,
				behavior: 'smooth',
			})
			if (osTop == 0) {
				clearInterval(timer)
			}
		}, 500)
	}
}
export default {
	data() {
		return {
			top: '',
			t: '>',
			// 产品
			product: [
				{
					bg: require('./img/xunlei (1).jpg'),
					img: require('./img/ia_100000001.png'),
					name: '迅雷11',
					text: '立即下载',
				},
				{
					bg: require('./img/xunlei (2).jpg'),
					img: require('./img/ia_100000002.png'),
					name: '迅雷影音',
					text: '立即下载',
				},
			],
			//共享计算与区块链
			comp: [
				{
					h4: '星域云',
					p: '共享计算，链接无限',
				},
				{
					h4: '网心云',
					p: '共享闲置资源，开创共享计算新模式',
				},
				{
					h4: '迅雷链开放平台',
					p: '让区块链技术赋能于每一个开发者',
				},
			],
			// 计算
		}
	},
	mounted() {
		// 滚动条滚动header的背景变色，当header滚动到指定位置隐藏nav显示
		window.onscroll = function () {
			var head = document.getElementsByClassName('header')[0]
			var nav = document.getElementById('nav')
			if (window.pageYOffset > 0) {
				head.style.background = 'rgba(0,0,0,.8)'
			} else {
				head.style.background = ''
			}
		}
	},
}
</script>

<style lang="scss">
* {
	margin: 0;
	padding: 0;
	font-size: 12px;
}
ul,
ol {
	list-style: none;
}
a {
	text-decoration: none;
}
.flex {
	display: flex;
}

// 头部
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
	transition: all 0.3s;
	justify-content: center;
	z-index: 100;
	&:hover {
		background: #000;
	}
	.head {
		width: 1200px;
		height: 64px;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		.logo {
			display: inline-block;
			width: 78px;
			height: 37px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.head_nav {
			width: 100%;
			justify-content: flex-end;
			// 导航栏样式
			.nav_link::after {
				content: '';
				width: 100%;
				height: 2px;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleX(0);
				transition: all 0.4s ease;
			}
			.nav_link:hover::after {
				transform: scaleX(1);
				background: #fff;
			}
			.cur::after {
				transform: scaleX(1);
				background: #fff;
			}
			li {
				position: relative;
				margin-left: 2.5%;
				text-align: center;
				a {
					display: inline-block;
					font-size: 14px;
					padding: 0 10px;
					line-height: 64px;
					color: #fff;
					position: relative;
				}

				.list {
					position: absolute;
					z-index: 2;
					display: none;
					top: 64px;
					left: 50%;
					margin-left: -50px;
					width: 100px;
					overflow: hidden;
					border-radius: 0 0 8px 8px;
					text-align: center;
					background-color: rgba(0, 0, 0, 0.9);
					transition: all 0.3s;

					a {
						width: 100%;
						color: #cccccc;
						line-height: 41px;
						padding: 0 10px;
						font-size: 14px;
						box-sizing: border-box;
						&:hover {
							color: #0f97ff;
						}
					}
					.bor {
						border-top: 1px solid rgba(255, 255, 255, 0.1);
					}
				}
			}
			.showlist:hover .list {
				display: block;
			}
		}
	}
}
// 内容
.main {
	// 焦点图
	.banner {
		z-index: 0.7;
		position: relative;
		width: 100%;
		height: 1080px;
		overflow: hidden;
		margin-bottom: -152px;
		background-color: #080325;
		.banner_wr {
			position: relative;
			top: 50%;
			left: 50%;
			margin: -540px 0 0 -960px;
			width: 1920px;
			height: 1080px;
			background-image: url('./img/banner_bg.jpg');
			background-repeat: no-repeat;
			background-position: center top;
			.banner_pro {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				.banner_img {
					position: absolute;
					top: 70px;
					left: 0;
					right: 0;
					width: 750px;
					height: 750px;
					margin: auto;
					background: url('./img/banner_img.png');
					.banner_cont {
						position: absolute;
						top: 70px;
						left: 0;
						right: 0;
						margin: auto;
						width: 588px;
						height: 588px;
						box-sizing: border-box;
						text-align: center;
						color: #fefefe;
						// logo
						.logo {
							position: absolute;
							z-index: 1;
							top: 46px;
							left: 0;
							right: 0;
							width: 160px;
							height: 160px;
							margin: auto;
							display: block;
							i {
								position: absolute;
								top: 0;
								right: 0;
								bottom: 0;
								left: 0;
								margin: auto;
								width: 100%;
								height: 100%;
								animation: ani_logo02 0.4s 0.1s both
									cubic-bezier(0.79, 0, 0.36, 1.01);
								display: block;
								opacity: 0;
								transform-origin: center center;
								background-image: url('./img/banner_icon.png');
								background-position: 0px 0px;
								background-repeat: no-repeat;
							}
							@keyframes ani_logo02 {
								0% {
									opacity: 0;
									transform: scale(0.6);
								}
								100% {
									opacity: 1;
									transform: none;
								}
							}
						}
						// 标题
						.title {
							animation-delay: 0.2s;
							animation-name: ani_detailup;
							animation-duration: 0.4s;
							animation-fill-mode: both;
							position: absolute;
							z-index: 1;
							top: 210px;
							left: 0;
							right: 0;
							font-size: 72px;
							font-weight: lighter;
							line-height: 1;
							letter-spacing: 12px;
							a {
								font-size: 72px;
								background-color: transparent;
								text-decoration: none;
								outline: none;
								cursor: pointer;
								color: inherit;
								font-weight: lighter;
								line-height: 1;
								letter-spacing: 12px;
							}
						}
						@keyframes ani_detailup {
							0% {
								opacity: 0;
								transform: translate3d(0, 30px, 0);
							}
							100% {
								opacity: 1;
								transform: none;
							}
						}
						// 介绍
						.banner_text {
							position: absolute;
							top: 310px;
							left: 0;
							right: 0;
							font-size: 24px;
							font-weight: lighter;
							line-height: 1;
							letter-spacing: 18px;
							animation-delay: 0.4s;
							animation-name: ani_detailup;
							animation-duration: 0.4s;
							animation-fill-mode: both;
						}
						@keyframes ani_detailup {
							0% {
								opacity: 0;
								transform: translate3d(0, 30px, 0);
							}
							100% {
								opacity: 1;
								transform: none;
							}
						}
						// 下载
						.banner_xiazai {
							animation-delay: 0.6s;
							-webkit-animation-name: ani_detailup;
							animation-name: ani_detailup;
							-webkit-animation-duration: 0.4s;
							animation-duration: 0.4s;
							-webkit-animation-fill-mode: both;
							animation-fill-mode: both;
							position: absolute;
							z-index: 2;
							top: 354px;
							left: 0;
							right: 0;
							display: block;
							margin: auto;
							overflow: hidden;
							color: inherit;
							width: 278px;
							height: 112px;
							line-height: 112px;
							.box:hover{
								background: rgba(26, 197, 255, 0.1);
							}
							.box {
								z-index: 10;
								width: 232px;
								height: 64px;
								line-height: 64px;
								border-radius: 34px;
								border: 1px solid #fff;
								
								transition: 0.25s;
								overflow: hidden;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								display: block;
								margin: auto;
								&::before {
									position: absolute;
									top: 0;
									left: 0;
									content: '';
									width: 100%;
									height: 100%;
									border-radius: 20px;
									opacity: 0;
									background: rgba(255, 255, 255, 0.25);
									transform: scale3d(0.4, 1, 1);
									transition: transform 0.2s, opacity 0.2s;
									transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
								}
							}
							.mask {
								-webkit-animation: ani_detail_mask 1.2s 0.9s both;
								animation: ani_detail_mask 1.2s 0.9s both;
								opacity: 0;
								transition: 0.3s;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								display: block;
								margin: auto;
								background-image: url('./img/spr_head.png');
								background-position: 0px 0px;
								background-repeat: no-repeat;
							}
							.mask:hover {
								background: #fff;
							}
							.info {
								-webkit-animation: ani_detail_btn 1.2s 0.9s both;
								animation: ani_detail_btn 1.2s 0.9s both;
								width: 100%;
								height: 100%;
								text-align: center;
								text-decoration: none;
								font-size: 24px;
								color: #fff;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								display: block;
								margin: auto;
								font-style: normal;
							}
						}
						.banner_xiazai:hover {
							outline-width: 0;
						}
						@keyframes ani_detailup {
							0% {
								opacity: 0;
								transform: translate3d(0, 30px, 0);
							}
							100% {
								opacity: 1;
								transform: none;
							}
						}
					}
					i {
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						display: block;
						margin: auto;
					}
					.banner_line1 {
						-webkit-animation: ani_line 40s linear infinite;
						animation: ani_line 40s linear infinite;
						background-image: url('./img/spr_bannerPathway.png');
						background-position: -2436px 0px;
						background-repeat: no-repeat;
						width: 719px;
						height: 719px;
					}
					@keyframes ani_line {
						0% {
							transform: none;
						}
						100% {
							transform: rotate(360deg);
						}
					}
					.banner_line2 {
						animation: ani_line 30s linear infinite reverse;
						background-image: url('./img/spr_bannerPathway.png');
						background-position: -2436px -724px;
						background-repeat: no-repeat;
						width: 648px;
						height: 674px;
					}
					@keyframes ani_line {
						0% {
							transform: none;
						}
						100% {
							transform: rotate(360deg);
						}
					}
					// 切换图标
					.changge {
						width: 588px;
						height: 100px;
						margin: auto;
						position: absolute;
						left: 0;
						right: 0;
						bottom: -90px;
						font-size: 0;
						text-align: center;
						a {
							display: inline-block;
							width: 100px;
							height: 100px;
							margin: 0 30px;
						}
						.icon1 {
							background: url('./img/banner_icon.png');
							background-position: -351px -330px;
							background-repeat: no-repeat;
						}
						.icon2 {
							background: url('./img/banner_icon.png');
							// background-position: -487px -105px;
							// background-repeat: no-repeat;
							background-position: -487px 0px;
							background-repeat: no-repeat;
							opacity: 0.6;
						}
						.icon2:hover{
							background: url('./img/banner_icon.png');
							background-position: -487px -105px;
							background-repeat: no-repeat;
							opacity: 1;
						}
						.icon3 {
							background: url('./img/banner_icon.png');
							// background-position: -487px -315px;
							// background-repeat: no-repeat;
							background-position: -487px -210px;
							background-repeat: no-repeat;
							opacity: 0.6;
						}
						.icon3:hover {
							background: url('./img/banner_icon.png');
							background-position: -487px -315px;
							background-repeat: no-repeat;
							opacity: 1;
						}
					}
				}
			}
		}
	}
	// 版块内容
	// 内容
	main {
		width: 100%;
		margin: 0 auto;
		margin-top: 100px;
		color: #fff;
		background-color: #080325;
		// 产品
		.product {
			width: 1200px;
			margin: 0 auto;
			.product_top {
				width: 100%;
				justify-content: space-between;
				.product_item {
					width: 48%;
					height: 385px;
					position: relative;
					border-radius: 20px;
					.bg {
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 20px;
						width: 100%;
					}
					.con {
						position: absolute;
						top: 70px;
						left: 0;
						width: 100%;
						text-align: center;
						.img {
							margin: 0 auto;
						}
						& > p {
							text-align: center;
							font-size: 36px;
						}
						& > div {
							width: 190px;
							height: 50px;
							border: 1px solid #fff;
							border-radius: 50px;
							line-height: 50px;
							text-align: center;
							margin: 0 auto;
							margin-top: 20px;
							cursor: pointer;
							&:hover {
								transition: 0.25s;
								background-color: rgba($color: #fff, $alpha: 0.2);
							}
						}
					}
				}
			}
			.more {
				width: 190px;
				height: 50px;
				border: 1px solid #fff;
				border-radius: 50px;
				line-height: 50px;
				text-align: center;
				margin: 0 auto;
				margin-top: 50px;
				cursor: pointer;
				&:hover {
					background-color: rgba($color: #fff, $alpha: 0.2);
					transition: 0.25s;
				}
			}
		}
		// 共享计算
		.computed {
			width: 100%;
			margin-top: 90px;
			& > h3 {
				font-size: 44px;
				text-align: center;
				font-weight: 300;
			}
			& > p {
				font-size: 22px;
				text-align: center;
				margin-top: 30px;
			}
			.computed_con {
				width: 100%;
				height: 500px;
				background: url('./img/xunlei (3).jpg');
				margin-top: 30px;
				.computed_con_con {
					width: 1200px;
					height: 100%;
					padding: 50px 0;
					margin: 0 auto;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					.item {
						width: 32.6%;
						height: 100%;
						border-radius: 20px;
						background: rgba(46, 56, 223, 0.3);
						padding-top: 100px;
						box-sizing: border-box;
						&:hover {
							transition: 0.25s;
							background: rgba(46, 56, 223, 0.7);
						}
						.item_con {
							width: 100%;
							height: 100%;
							position: relative;
							h4 {
								font-size: 28px;
								text-align: center;
							}
							& > p {
								font-size: 18px;
								text-align: center;
								margin-top: 20px;
							}
							& > i {
								display: block;
								width: 152px;
								height: 90px;
								margin: 0 auto;
								margin-top: 20px;
								background: url('./img/xunlei (11).png') no-repeat;
								background-position: -163px -168px;
							}
							& > span {
								display: none;
								width: 167px;
								height: 48px;
								border: 1px solid #fff;
								border-radius: 50px;
								line-height: 48px;
								margin: 0 auto;
								text-align: center;
								margin-top: 56px;
								cursor: pointer;
								&:hover {
									background-color: rgba($color: #fff, $alpha: 0.2);
								}
							}
							&:hover {
								transition: 0.25s;
								transform: translate(0, -30px);
								& > p {
									display: none;
								}
								& > span {
									display: block;
									transition: 0.25s;
									transform: translate(0, -36px);
								}
							}
						}
					}
				}
			}
		}
		// 招聘
		.job {
			width: 1200px;
			margin: 0 auto;
			margin-top: 100px;
			h3 {
				width: 100%;
				margin: 0 auto;
				text-align: center;
				font-size: 44px;
				font-weight: 300;
			}
			& > div {
				margin-top: 100px;
				margin-bottom: 50px;
				width: 100%;
				& > img {
					width: 100%;
					cursor: pointer;
				}
			}
		}
	}
	//
}
// 回顶部
.feedback {
	position: fixed;
	z-index: 50;
	width: 54px;
	height: 34px;
	padding: 10px 0;
	border-radius: 4px;
	background: #333;
	bottom: 30px;
	right: 3.5%;
	text-align: center;
	font-size: 14px;
	font-weight: lighter;
	line-height: 17px;
	color: #fff;
	opacity: 0.6;
	transition: 0.25s;
	text-decoration: none;
	outline: none;
	cursor: pointer;
}
.feedback:hover {
	opacity: 0.9;
}
.to_top {
	display: none;
	position: fixed;
	right: 3.5%;
	bottom: 100px;
	display: block;
	width: 54px;
	height: 54px;
	border-radius: 4px;
	font-size: 0;
	transition: all 0.25s ease;
	&::before {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		background: #333;
		opacity: 0.6;
		transition: 0.25s;
	}
	i {
		position: absolute;
		top: 20px;
		left: 0;
		right: 0;
		display: block;
		margin: auto;
		background-image: url('./img/spr_common.png');
		background-position: 0px -220px;
		background-repeat: no-repeat;
		width: 20px;
		height: 12px;
	}
}
.to_top:hover {
	opacity: 0.9;
}

// 底部
.footer {
	width: 100%;
	background: #000;
	justify-content: center;
	.footer_content {
		width: 1200px;
		height: 100%;
		padding: 36px 0 60px 0;
		// 底部第一层
		.top {
			justify-content: space-between;
			border-bottom: 1px solid #333333;
			align-items: center;
			// 第一层导航
			.nav {
				padding-bottom: 16px;
				li {
					display: inline-block;
					a {
						padding: 10px 0 10px 0;
						margin-right: 36px;
						display: inline-block;
						font-size: 14px;
						color: #fff;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				.cur {
					a {
						text-decoration: underline;
					}
				}
			}
			.tubiao {
				.right {
					margin-left: 30px;
				}
				a {
					position: relative;
					i {
						display: inline-block;
						width: 21px;
						height: 17px;
						background-image: url('./img/spr_common.png');

						background-repeat: no-repeat;
					}
					.wb {
						background-position: -195px -141px;
						&:hover {
							background-position: -221px -141px;
						}
					}
					.wx {
						background-position: -225px -175px;
						&:hover {
							background-position: -225px -175px;
						}
						&:hover + .erweima {
							display: block;
						}
					}
					.erweima {
						display: none;
						position: absolute;
						top: 25px;
						left: 50%;
						margin-left: -54px;
						width: 108px;
						height: 110px;
						overflow: hidden;
					}
				}
			}
		}
		// 底部中间
		.middle {
			font-size: 12px;
			color: #fff;
			opacity: 0.5;
			line-height: 21px;
			text-transform: uppercase;
			padding-top: 24px;
			margin-bottom: 26px;
			p {
				a {
					color: #fff;
					line-height: 21px;
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
		// 底部
		.bottom {
			white-space: nowrap;
			overflow: hidden;
			ul {
				width: 100%;
				align-items: center;
				li {
					display: inline-block;
					padding-right: 5%;
					border-left: 1px solid #333333;
					padding-left: 5%;
					a {
						display: inline-block;
						position: relative;
						text-align: center;
						font-size: 12px;
						color: #787878;
						padding: 0 0 0 40px;
						&:hover {
							text-decoration: underline;
						}
						.ico {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							background-image: url('./img/spr_common.png');
							background-repeat: no-repeat;
							width: 40px;
							height: 38px;
						}
						.ico01 {
							background-position: 0px -177px;
						}
						.ico02 {
							background-position: -45px -177px;
						}
						.ico03 {
							background-position: -90px -177px;
						}
						.ico04 {
							background-position: -135px -177px;
						}
						.ico05 {
							background-position: -180px -177px;
						}
					}
				}
				.background_img {
					border-left: none;
					padding-left: 0;
				}
			}
		}
	}
}
</style>




